<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../lib/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="../../lib/webuploader/webuploader-demo.css">
    <style>
        .form-wrap{
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="form-wrap">
    <!-- 新增国家表单 -->
    <form id="commodity_form" class="layui-form" method="post" enctype="multipart/form-data">
       <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input id="commodityName_input" name="commodityName" type="text" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属系列</label>
    		<div class="layui-input-block" >
    		 	<select name="categoryId" id="category_select">
                </select>
    		</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品功能</label>
    		<div class="layui-input-block" class="effect_checkbox" id="commodity_effect_checkbox">
    		</div>
        </div>
        <div class="layui-form-item" id="img_upload_div">
            <label class="layui-form-label">商品图片</label>
    		<div class="layui-input-block">
    			 <div class="ibox-content">
                        <div class="page-container">
                            <div id="uploader" class="wu-example">
                                <div class="queueList">
                                    <div id="dndArea" class="placeholder">
                                        <div id="filePicker"></div>
                                    </div>
                                </div>
                                <div class="statusBar" style="display:none;">
                                    <div class="progress">
                                        <span class="text">0%</span>
                                        <span class="percentage"></span>
                                    </div>
                                    <div class="info"></div>
                                    <div class="btns">
                                        <div id="filePicker2"></div>
                                        <div class="uploadBtn">开始上传</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    	</div>
    	<div class="layui-form-item">
           <label class="layui-form-label">商品大图</label>
           <div class="layui-input-block">
					<img id="commodity_img_big" name="commodityImgBig" width="100px" style="display:none" height="100px" src=""/>
					<input type="button" id="commodityImgBigBtn" value="选择(375 * 220)"/>
					<input type="file" id="commodity_img_big_file" name="commodityImgBigFile" style="display:none"/>
           </div>
        </div>
    	<div class="layui-form-item">
           <label class="layui-form-label">详情图片</label>
           <div class="layui-input-block">
					<img id="introduce_img_file" name="detailImgPath" width="100px" style="display:none" height="100px" src=""/>
					<input type="button" id="change_introduce_img_button" value="选择(375 * X)"/>
					<input type="file" id="change_introduce_img_input" name="introduce_file" style="display:none"/>
           </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品描述</label>
            <div class="layui-input-block">
	            <textarea name="commodityNote" placeholder="请输入商品描述" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
	            <label class="layui-form-label">商品价格</label>
	            <div class="layui-input-block">
	                <input id="price" name="price" type="text" class="layui-input">
	            </div>
	    </div>
	    <div class="layui-form-item">
            <label class="layui-form-label">商品规格</label>
            <div class="layui-input-block">
                <input id="unit" name="unit" type="text" class="layui-input">
            </div>
	    </div>
	    <div class="layui-form-item">
            <label class="layui-form-label">商品库存</label>
            <div class="layui-input-block">
                <input id="count" name="count" type="text" class="layui-input">
            </div>
	    </div>
	     <div class="layui-form-item">
            <label class="layui-form-label">商品代码</label>
            <div class="layui-input-block">
                <input id="commodityCode" name="commodityCode" type="text" class="layui-input">
            </div>
	    </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否推荐</label>
            <div class="layui-input-block">
                <select name="recommend">
						<option value="1">是</option>
						<option value="0">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否热卖</label>
            <div class="layui-input-block">
                <select name="hot">
						<option value="1">是</option>
						<option value="0">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品状态</label>
            <div class="layui-input-block">
                <select name="status">
						<option value="1">上架</option>
						<option value="0">下架</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序码</label>
            <div class="layui-input-block">
                <input name="sortCode" type="text" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block"> 
                <button class="layui-btn" type="button" onclick="commodityForm.submit()">提交</button>
            </div>
        </div> 
    </form>
</div>
	<script src="../../publicjs/jquery-1.8.0.min.js"></script>
	<script src="../../publicjs/smallkingutil.js"></script>
	<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form', 'laydate'], function(){
    var form = layui.form,
    	layer = layui.layer;
	// 用户表单相关的操作对象
	window.commodityForm = {
		getCategoryList : function(){
			// 得到所有的商品系列分类
			var ajaxParam = {
				url : commonUtil.domain() +"/admin/mall/category/list"
			}
			ajaxUtil.post(ajaxParam, function(data){
				selectUtil.fillSelect($('#category_select'), data.data, "categoryId", "categoryName");
				form.render('select');
			});
		},
		getEffectList : function(commodityId){
			var data = {};
			if(commodityId){
				data.commodityId = commodityId;
			}
			var ajaxParam = {
    			url : commonUtil.domain() +'/admin/mall/effect/list',
    			data : data
    		}
   			ajaxUtil.post(ajaxParam, function(data) {
   				var parent = $('#commodity_effect_checkbox');
   				parent.html("");
   				var dataList = data.data;
   				console.log(dataList);
   				var childStr;
   				for(var i = 0; i < dataList.length; i ++){
   					var item = dataList[i];
   					var checked = item.checked?"checked":"";
   					childStr = '<input type="checkbox" class="effect_checkbox" value="'+ item.effectId + '" title="' + item.effectName + '"' + checked +'  lay-filter="resourceCheck">'
   					parent.append(childStr);
   				}
   			    form.render("checkbox"); // 更新下拉框值
   			});
		},
		imgIdList : [],
		submit : function() {
			// 先验证表单商品属性
			var effectIdList = [];
			$('.effect_checkbox').each(function(){
				var isChecked = $(this).attr('checked'); 
				if(isChecked){
					effectIdList.push($(this).val());
				}
			});
			if(effectIdList.length == 0){
				layer.msg("请选择商品功能。");
				return;
			}
			if(!$("#commodityName_input").val() ||$.trim($("#commodityName_input").val()) == ""){
				layer.msg("请输入商品名称。");
				return;
			}
			if(this.imgIdList.length == 0 && !this.commodityId){
				layer.msg("请上传商品图片。");
				return ;
			}
			var commodityForm = document.getElementById("commodity_form");
			// 得到商品参数json
			var formData = new FormData(commodityForm);
			formData.set("effectIdList", effectIdList);
			formData.set("imgIdList", this.imgIdList);
			var	url, msg, data;
			if(this.commodityId){
				url = commonUtil.domain() +"/admin/mall/commodity/update";
				msg = "修改";
				formData.set("commodityId", this.commodityId);
			}else{
				url = commonUtil.domain() +"/admin/mall/commodity/insert";
				msg = "新增";
			}
			var ajaxParam = {
				url : url
			}
			ajaxUtil.submitForm(formData, ajaxParam, function(data) {
				if (data.code == 200) {
					// 关闭当前的表单弹窗 刷新父级页面的数据表格
					var parentHtml = window.parent;
					parentHtml.layer.closeAll();
					parentHtml.commodityTable.refresh();
				} else {
					layer.msg(msg + "商品失败，请联系开发人员。");
				}
			});
		}
	}
	
	var commodityId = commonUtil.getRequestParam("commodityId");
	// 显示所有商品系列分类
	commodityForm.getCategoryList(commodityId);
	// 查询商品功能列表
	commodityForm.getEffectList(commodityId);
	if(commodityId){
		// 如果有ID 就是修改。 修改的话 隐藏商品图片上传组件
		$("#img_upload_div").hide();
		commodityForm.commodityId = commodityId;
		// 请求后台得到当前修改的用户数据，将其显示在表单里
		var ajaxParam = {
			url : commonUtil.domain() +'/admin/mall/commodity/detail',
			data : {
				commodityId : commodityId
			}
		}
		ajaxUtil.post(ajaxParam, function(data) {
			var commodity = data.data;
			$('#change_introduce_img_button').val("更换");
			$('#introduce_img_file').attr("src", commodity.detailImgPath);
			$('#introduce_img_file').show();
			
			$('#commodityImgBigBtn').val("更换");
			$('#commodity_img_big').attr("src", commodity.commodityBigImg);
			$('#commodity_img_big').show();
			
			formUtil.setForm($('#commodity_form'), commodity);
			form.render("select");
		});
	}
	
});
$(function(){
	// 点击更换商品详情图片按钮
	commonUtil.setMaxLength(40);
	$('#change_introduce_img_button').click(function() {
		$('#change_introduce_img_input').click();
		document.getElementById("change_introduce_img_input").onchange = function(){
			var imgFile = document.getElementById('change_introduce_img_input').files[0];
			var fileName = imgFile.name.toLowerCase();
			if(!fileName.endWith("jpg") && !fileName.endWith("png")
					&& !fileName.endWith("gif") && !fileName.endWith("jpeg")){
				layer.msg('只支持jpg，png，gif类型图片');
				return;
			}
			var read = new FileReader();
			read.readAsDataURL(imgFile);
			read.onload = function (e) {
				$('#introduce_img_file').show();
				$('#introduce_img_file').attr("src", this.result);
			}
		};
	});
	// 点击更换商品大图按钮
	$('#commodityImgBigBtn').click(function() {
		$('#commodity_img_big_file').click();
		document.getElementById("commodity_img_big_file").onchange = function(){
			var imgFile = document.getElementById('commodity_img_big_file').files[0];
			var fileName = imgFile.name.toLowerCase();
			if(!fileName.endWith("jpg") && !fileName.endWith("png")
					&& !fileName.endWith("gif") && !fileName.endWith("jpeg")){
				layer.msg('只支持jpg，png，gif类型图片');
				return;
			}
			var read = new FileReader();
			read.readAsDataURL(imgFile);
			read.onload = function (e) {
				$('#commodity_img_big').show();
				$('#commodity_img_big').attr("src", this.result);
			}
		};
	});
});




</script>
<!--<script src="plugins/webuploader/webuploader.min.js"></script>
<script src="plugins/webuploader/webuploader-demo.js"></script>-->
</body>
